<template>
	<view class="page">
		<view class="list">
			<view class="item flex-box">
				<view class="goods-img">
					<image :src="$imgUrls(pageData.goods_img)" mode="aspectFill"></image>
					<text v-if='pageData.goods_type == 1'>特价</text>
					<text v-if='pageData.goods_type == 2'>团购</text>
				</view>
				<view class="flex flex-between cloumn">
					<view>
						<view class="name lines2">{{ pageData.goods_name?pageData.goods_name:'--' }}</view>
						<view class="info lines">{{ pageData.goods_info?pageData.goods_info:'--' }}</view>
					</view>
					<view class="flex-between">
						<view v-if='pageData.goods_price'>
							<text class="myPrice">{{ pageData.goods_price.slice(0,pageData.goods_price.length-3)}}.</text>
							<text class="price-mini">{{ pageData.goods_price.slice(pageData.goods_price.length-2,pageData.goods_price.length) }}</text>
						</view>
						<!-- <view class="up">上架</view> -->
					</view>
				</view>
			</view>
			<view class="item flex-box align-center" @click="update('item_number','货号',pageData.item_number)">
				<view class="title">货号</view>
				<view class="txt flex">{{ pageData.item_number?pageData.item_number:'' }}</view>
				<text class="iconfont icon-more"></text>
			</view>
			
			<!--show_time:1 要显示时间和判断活动的开始结束   goods_state：活动状态 2未开始 1进行中 0已结束-->
			<template v-if='pageData.show_time == 1'>
				<time-picker showType="dateToTime" @btnConfirm="btnConfirm" @btnCancel="btnCancel">
					<view class="item flex-box align-center">
						<view class="title">开始时间</view>
						<view class="txt flex flex-box">
							{{ pageData.start_time?pageData.start_time:'' }}
						</view>
						<text class="iconfont icon-more"></text>
					</view>	
				</time-picker>
				<time-picker showType="dateToTime" @btnConfirm="btnConfirm2" @btnCancel="btnCancel">
					<view class="item flex-box align-center">
						<view class="title">结束时间</view>
						<view class="txt flex flex-box">{{ pageData.goods_end_time }}</view>
						<text class="iconfont icon-more"></text>
					</view>	
				</time-picker>
			</template>
			
			<view class="item flex-box align-center" v-if='pageData.goods_group_number && pageData.goods_type == 2' @click="update('group_number','成团人数',pageData.goods_group_number)">
				<view class="title">人数</view>
				<view class="txt flex">{{ pageData.goods_group_number }}</view>
				<text class="iconfont icon-more"></text>
			</view>
			<view class="item flex-box align-center" @click="update('group_valid_time','计时',pageData.group_valid_time)" v-if='pageData.group_valid_time && pageData.goods_type == 2'>
				<view class="title">计时</view>
				<view class="txt flex">{{ pageData.group_valid_time?pageData.group_valid_time:'0' }}小时</view>
				<text class="iconfont icon-more"></text>
			</view>
			<view class="item flex-box align-center" @click="update('stock','库存',pageData.stock)">
				<view class="title">库存</view>
				<view class="txt flex">{{ pageData.stock?pageData.stock:'0.00' }}</view>
				<text class="iconfont icon-more"></text>
			</view>
			<view class="item flex-box align-center" @click="update('unit','单位',pageData.unit)">
				<view class="title">单位</view>
				<view class="txt flex">{{ pageData.unit?pageData.unit:'' }}</view>
				<text class="iconfont icon-more"></text>
			</view>
			<view class="item flex-box align-center" @click="update('full_price','原价',pageData.goods_full_price)">
				<view class="title">原价</view>
				<view class="txt flex">{{ pageData.goods_full_price?pageData.goods_full_price:'0.00' }}</view>
				<text class="iconfont icon-more"></text>
			</view>
			<template v-if='pageData.goods_type != 2'>
				<view class="item flex-box align-center" @click="update('price','售价',pageData.goods_price)" >
					<view class="title">售价</view>
					<view class="txt flex">{{ pageData.goods_price?pageData.goods_price:'0.00' }}</view>
					<text class="iconfont icon-more"></text>
				</view>
			</template>
			<template v-if='pageData.goods_type == 2'>
				<view class="item flex-box align-center" @click="update('open_group_price','开团价',pageData.goods_fopen_group_pricee)">
					<view class="title">开团价</view>
					<view class="txt flex">{{ pageData.goods_fopen_group_pricee?pageData.goods_fopen_group_pricee:'0.00' }}</view>
					<text class="iconfont icon-more"></text>
				</view>
			</template>
		</view>
		
		
		<view class="mask flex-box flex-center align-center" v-if='showAdjustment' @click="showAdjustment = false">
			<view class="adjustment" @click.stop>
				<view class="title">修改{{title}}</view>
				<view class="msg">
					<view class="item flex-box align-center">
						<input type="text" v-model="value" class="flex" :placeholder="'请输入要修改的'+title" placeholder-class="pla"/>
					</view>
				</view>
				<view class="btns flex-box">
					<view class="cancel" @click="showAdjustment = false">取消</view>
					<view class="ok" @click="WriteOff">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				showAdjustment: false,
				title: '',
				type: '',
				goods_id: '',
				pageData: '',
				value:''
			};
		},
		onLoad(e) {
			that = this
			if(e.id){
				that.goods_id = e.id
				that.getList()
			}
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		methods:{
			update(key, title ,val){
				that.type = key
				that.showAdjustment = true
				that.value = val
				that.title = title
			},
			WriteOff(){
				var param = {
					shop_id: uni.getStorageSync('store_id'),
					goods_id: that.goods_id,
					type: that.type
				}
				param[that.type] = that.value
				that.$http.post({
					url: '/singleSaleManageApi/goodsEdit',
					data: param
				}).then(res => {
					if(res.code == 200){
						that.showAdjustment = false
						that.getList()
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			btnConfirm(e){
				that.type = 'start_time'
				that.value = e.key
				that.WriteOff()
			},
			btnConfirm2(e){
				that.type = 'end_time'
				that.value = e.key
				that.WriteOff()
			},
			getList(){
				that.$http.get({
					url: '/singleSaleManageApi/goodsDetails',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						goods_id: that.goods_id
					}
				}).then(res => {
					if(res.data){
						that.pageData = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.page{
	.list{
		padding: $page-space;
		.item{
			margin-bottom: 26rpx;
			background-color: #FFFFFF;
			padding: 20rpx;
			border-radius: 12rpx;
			.goods-img{
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 20rpx;
				position: relative;
				text{
					background-color: #F6B081;
					padding: 2rpx 6rpx;
					color: white;
					position: absolute;
					left: 0;
					bottom: 0;
					font-size: 22rpx;
					border-radius: 4rpx;
				}
				image{
					background-color: #f9f9f9;
					width: 100%;
					height: 100%;
				}
			}
			.cloumn{
				width: calc(100% - 200rpx);
			}
			.name{
				font-size: 26rpx;
				font-weight: bold;
			}
			.info{
				color: #999999;
				font-size: 22rpx;
				margin-top: 10rpx;
			}
			.myPrice{
				color: #DB3801;
				font-size: 34rpx;
				font-weight: bold;
			}
			.price-mini{
				color: #DB3801;
				font-weight: bold;
			}
			.up{
				width: 124rpx;
				line-height: 48rpx;
				background-color: $uni-color-primary;
				color: white;
				text-align: center;
				border-radius: 48rpx;
				font-size: 28rpx;
			}
			.title{
				color: #666666;
				font-size: 28rpx;
				margin-right: 30rpx;
			}
			.txt{
				font-size: 28rpx;
			}
		}
	}

	.adjustment{
		background-color: #FFFFFF;
		width: 590rpx;
		border-radius: $border-radius-base;
		overflow: hidden;
		.title{
			text-align: center;
			padding: 48rpx 0;
			font-size: 36rpx;
			font-weight: 600;
		}
		.msg{
			padding: 0 30rpx;
			.item{
				margin-top: 28rpx;
				height: 88rpx;
				border-radius: 44rpx;
				border: 1px solid #EEEEEE;
				padding: 0 30rpx;
				input{
					height: 100%;
					font-size: 28rpx;
				}
			}
		}
		.btns{
			height: 88rpx;
			line-height: 88rpx;
			margin-top: 50rpx;
			.cancel{
				color: #4C4C4C;
				font-size: 32rpx;
				flex: 1;
				text-align: center;
				border-top: 1px solid #EEEEEE;
			}
			.ok{
				flex: 1;
				text-align: center;
				color: #FFFFFF;
				background-color: $uni-color-primary;
				font-size: 32rpx;
			}
		}
	}
}
</style>
